<template>
    <div class="body">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="block">
                    <img src="@/assets/img/car2.png" class="pic" />
                    <div class="num" v-cloak>{{ listTop[0] }}</div>
                    <div class="title">车位总数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="block" style="background-color: #f5b01c">
                    <img src="@/assets/img/stall.png" class="pic" />
                    <div class="num" v-cloak>{{ listTop[1] }}</div>
                    <div class="title">剩余车位</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="block" style="background-color: #d0d91e">
                    <img src="@/assets/img/ratio.png" class="pic" />
                    <div class="num" v-cloak>{{ listTop[2] }}</div>
                    <div class="title">车位使用率</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="block" style="background-color: #16b8a7">
                    <img src="@/assets/img/gate.png" class="pic" />
                    <div class="num" v-cloak>{{ listTop[3] }}</div>
                    <div class="title">道闸数量</div>
                </div>
            </el-col>
        </el-row>
        <div style="width: 100%; height: 20px"></div>
        <el-row :gutter="20">
            <el-col :span="15">
                <div class="chart">
                    <div class="title">日车流量统计</div>
                    <div class="button">近30天</div>
                    <div class="chart-container" id="chart-container"></div>
                </div>
            </el-col>
            <el-col :span="9">
                <div class="chart">
                    <div class="title">车位占比情况</div>
                    <div class="chart-container" id="chart-container2"></div>
                </div>
            </el-col>
        </el-row>
        <div style="width: 100%; height: 20px"></div>
        <el-row :gutter="20">
            <el-col :span="15">
                <div class="chart">
                    <div class="title">时车流量统计</div>
                    <div class="button">近24小时</div>
                    <div class="chart-container" id="chart-container3"></div>
                </div>
            </el-col>
            <el-col :span="9">
                <div class="chart">
                    <div class="title">车位统计</div>
                    <div class="list">
                        <el-row style="margin-bottom: 15px">
                            <el-col :span="8"
                                ><div class="title-list">
                                    停车场区位
                                </div></el-col
                            >
                            <el-col :span="8"
                                ><div class="title-list">空闲车位</div></el-col
                            >
                            <el-col :span="8"
                                ><div class="title-list">已用车位</div></el-col
                            >
                        </el-row>
                        <div class="list2">
                            <el-row
                                v-for="(item, index) in list"
                                :key="index"
                                style="margin-bottom: 15px"
                            >
                                <el-col :span="8"
                                    ><div
                                        class="title-list"
                                        style="color: #777777"
                                    >
                                        {{ item.region_name }}
                                    </div></el-col
                                >
                                <el-col :span="8"
                                    ><div
                                        class="title-list"
                                        style="color: #777777"
                                    >
                                        {{ item.notUsedCount }}
                                    </div></el-col
                                >
                                <el-col :span="8"
                                    ><div
                                        class="title-list"
                                        style="color: #777777"
                                    >
                                        {{ item.usedCount }}
                                    </div></el-col
                                >
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { stallTop, stallChart } from "@/api/sendhttp/son";
export default {
    data() {
        return {
            list: [],
            test: "",
            listTop: [],
        };
    },
    mounted() {
        stallChart(4).then((res) => {
            this.list = res.data.data;
        });

        this.getData();
        this.linechart();
        this.pieChart();
        this.linechart3();
    },
    methods: {
        async getData() {
            for (let i = 1; i <= 4; i++) {
                await stallTop(i).then((res) => {
                    if (i == 3) {
                        this.listTop.push(res.data.data.precent);
                    } else {
                        this.listTop.push(res.data.data.count);
                    }
                });
            }
            console.log(this.listTop);
        },

        linechart() {
            let date = [];
            let count = [];
            stallChart(1).then((res) => {
                for (let i = 0; i < res.data.data.length; i++) {
                    date.push(res.data.data[i].date);
                    count.push(res.data.data[i].count);
                }
            });

            setTimeout(() => {
                var dom = document.getElementById("chart-container");
                var myChart = this.$echarts.init(dom, null, {
                    renderer: "canvas",
                    useDirtyRect: false,
                });
                var app = {};

                var option;

                option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    xAxis: {
                        type: "category",
                        axisLabel: {
                            show: true,
                            rotate: 40,
                        },
                        data: date,
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: count,
                            type: "line",
                            smooth: true,
                            lineStyle: {
                                color: "#EE9696",
                            },
                            itemStyle: {
                                color: "#EE9696",
                            },
                            label: {
                                show: true,
                                position: "top",
                                color: "#EE9696",
                            },
                        },
                    ],
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option);
                }

                window.addEventListener("resize", myChart.resize);
            }, 800);
        },

        pieChart() {
            let use;
            let nouse;
            stallChart(2).then((res) => {
                use = res.data.data[0].usedCount;
                nouse = res.data.data[0].notUsedCount;
            });

            setTimeout(() => {
                var dom = document.getElementById("chart-container2");
                var myChart = this.$echarts.init(dom, null, {
                    renderer: "canvas",
                    useDirtyRect: false,
                });
                var app = {};

                var option;

                var option;

                option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    legend: {
                        orient: "vertical",
                        top: "5%",
                        left: "5%",
                        textStyle: {
                            color: "#000000",
                        },
                    },
                    color: ["#6cb3ff", "#f5b01c"],
                    series: [
                        {
                            type: "pie",
                            radius: "50%",
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 18,
                                    fontWeight: "bold",
                                },
                            },
                            labelLine: {
                                show: true,
                            },
                            data: [
                                {
                                    value: nouse,
                                    name: "空闲",
                                    label: {
                                        color: "#000000",
                                        textBorderColor: "#000000",
                                        formatter: "空闲" + "\n" + `${nouse}个`,
                                    },
                                },
                                {
                                    value: use,
                                    name: "已用",
                                    label: {
                                        color: "#000000",
                                        textBorderColor: "#000000",
                                        formatter: "已用" + "\n" + `${use}个`,
                                    },
                                },
                            ],
                        },
                    ],
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option);
                }

                window.addEventListener("resize", myChart.resize);
            }, 800);
        },

        linechart3() {
            let hours = [];
            let count = [];
            stallChart(3).then((res) => {
                for (let i = 0; i < res.data.data.length; i++) {
                    hours.push(res.data.data[i].hours + "时");
                    count.push(res.data.data[i].count);
                }
            });

            setTimeout(() => {
                var dom = document.getElementById("chart-container3");
                var myChart = this.$echarts.init(dom, null, {
                    renderer: "canvas",
                    useDirtyRect: false,
                });
                var app = {};

                var option;

                option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    xAxis: {
                        type: "category",
                        // axisLabel: {
                        //   show: true,
                        //   rotate: 40,
                        // },
                        data: hours,
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: count,
                            type: "line",
                            smooth: true,
                            lineStyle: {
                                color: "#EE9696",
                            },
                            itemStyle: {
                                color: "#EE9696",
                            },
                            label: {
                                show: true,
                                position: "top",
                                color: "#EE9696",
                            },
                        },
                    ],
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option);
                }

                window.addEventListener("resize", myChart.resize);
            }, 800);
        },
    },
};
</script>

<style scoped lang="scss">
.body {
    padding: 20px;
}
.chart-container {
    position: absolute;
    bottom: 15px;
    width: 100%;
    height: 364px;
    overflow: hidden;
    margin: auto;
}
.block {
    width: 100%;
    height: 70px;
    line-height: 20px;
    border-radius: 8px;
    background-color: #56a3ee;
    text-align: center;
    position: relative;
    img {
        width: 30px;
        height: 30px;
    }
}
.pic {
    position: absolute;
    top: 20px;
    left: 3%;
}
.num {
    position: absolute;
    right: 3%;
    top: 20px;
    color: rgba(255, 254, 232, 1);
    font-size: 28px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
.title {
    position: absolute;
    right: 3%;
    top: 45px;
    color: rgba(255, 254, 232, 1);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
.chart {
    position: relative;
    margin: auto;
    width: 100%;
    height: 456px;
    border-radius: 8px;
    background-color: rgba(241, 243, 245, 1);
    border: 1px solid rgba(213, 213, 211, 1);
    .title {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 128px;
        height: 24px;
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
    }
    .button {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 81px;
        height: 25px;
        line-height: 25px;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;
        border: 1px solid rgba(187, 187, 187, 1);
    }
}
.list {
    position: relative;
    top: 60px;
    height: 400px;
    width: 100%;
}
.list2 {
    width: 100%;
    height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
}
.title-list {
    line-height: 30px;
    width: 82%;
    height: 30px;
    padding-left: 40px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: SourceHanSansSC-regular;
}
</style>
